<template>
	<view class="content" v-if="wrong">

		<view style="margin-top: 240rpx;">
			<u-empty mode="search" text="群信息已失效"></u-empty>
		</view>

		<view style="margin-top: 160rpx;">
			<u-button @click="back" type="warning" size="medium" shape="circle" plain>返回</u-button>
		</view>

	</view>

	<view class="content" v-else>
		<u-navbar back-text="" title="">
			<view style="width: 100%;display: flex;justify-content: center;font-weight: bold;font-size: 34rpx;">
				群信息
			</view>
			<view slot="right">
				<view style="margin-right: 40rpx;margin-top: 8rpx;">
					<!-- <image src="/static/images/share.png" style="width: 50rpx;" mode="widthFix"></image> -->
				</view>
			</view>
		</u-navbar>

		<view style="margin-top: 100rpx;width: 100rpx;height: 90rpx;">
			<bgyx-group-avatar :id="id" />
		</view>

		<view style="margin-top: 20rpx;font-weight: bold;color: #2a2a2a;">
			{{info.name}}
		</view>
		<view style="margin-top: 10rpx;color: #3f516a;font-size: 24rpx;">
			{{info.note}}
		</view>

		<view style="margin-top: 160rpx;" v-if="info.entertype == '自由进群'">
			<u-button @click="entergroup" type="primary" size="medium" shape="circle" plain>加入群聊</u-button>
		</view>
		<view style="margin-top: 160rpx;" v-if="info.entertype == '申请进群'">
			<u-button @click="sqgroup" type="warning" size="medium" shape="circle" plain>申请进群</u-button>
		</view>
		<view style="margin-top: 160rpx;" v-if="info.entertype == '禁止进群'">
			<u-button @click="back" type="error" size="medium" shape="circle" plain>禁止进群</u-button>
		</view>

		<u-popup v-model="showapply" mode="center" border-radius="12">
			<view style="width: 700rpx;display: flex;flex-direction: column;align-items: center;padding: 25rpx;">
				<view style="width: 100%;font-weight: bold;font-size: 36rpx;margin: 10rpx;">
					填写申请信息
				</view>
				<view style="width: 100%;margin-top: 10rpx;">
					<u-input focus v-model="reason" border type="textarea"></u-input>
				</view>
				<view style="width: 100%;margin-top: 20rpx;margin-bottom: 20rpx;">
					<u-button @click="sendapply" type="primary">发送申请</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		sub
	} from '../../common/event';
	import QRCode from 'qrcode'
	import config from '../../config'
	export default {
		data() {
			return {
				id: '',
				info: {},
				wrong: false,
				showapply: false,
				reason: ''
			}
		},
		onLoad({
			id
		}) {
			this.id = id
			this.getdata(id)
			this.reason = "我是" + this.$store.state.user.user.name
		},
		methods: {
			getdata: async function(id) {
				const ret = await this.$u.get(`bgyx/bgyx/getdata/chatgroup/${id}`)
				if (ret && ret.success && ret.data) {
					this.info = ret.data
				} else {
					this.wrong = true
				}

			},
			entergroup: async function() {
				const ret = await this.$u.post(`friend/friend/entergroup/${this.id}`)
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			sqgroup: async function() {
				this.showapply = true
			},
			sendapply: async function() {
				const ret = await this.$u.post(`friend/friend/applygroup/${this.id}`, {
					reason: this.reason
				})
				if(ret && ret.success){
					uni.showToast({
						title:"已发送"
					})
					setTimeout(()=>{
						uni.navigateBack()
					},500)
				}else{
					uni.showToast({
						title:ret.message,
						icon:"none"
					})
					setTimeout(()=>{
						uni.navigateBack()
					},500)
				}
				
			},
			back: function() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		flex-direction: column;
		overflow-y: auto;
		background: #FFF;
	}
</style>